<!--
 * @Description: 绑定商品
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-06-01 10:19:23
 * @FilePath: /yuxiuproweb/src/views/app/category/mods/goods.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    title="绑定商品"
    :visible.sync="shows"
    width="1100px"
    append-to-body
  >
    <div class="app-container">
      <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="宝贝名称" prop="name">
          <el-input
            v-model="name"
            placeholder="请输入宝贝名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-table
        :data="productList"
        :max-height="500"
        ref="multipleTable"
        @select="handleSelectionChange"
        @select-all="handleSelectionAllChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="宝贝名称"
          align="center"
          prop="name"
          min-width="180"
        />
        <el-table-column
          label="宝贝销售别名"
          align="center"
          prop="alias"
          min-width="180"
        />
        <el-table-column
          label="描述"
          align="center"
          prop="info"
          min-width="180"
        />
        <el-table-column label="是否启用" align="center" prop="enableFlag">
          <template slot-scope="{ row }">
            {{ row.enableFlag === "Y" ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column
          label="标签"
          align="center"
          prop="label"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <el-tag type="success" size="mini">{{ row.label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="type"
          min-width="120"
        >
          <template slot-scope="{ row }">
            {{ getTypeName(dict.type.goods_type, row.type) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listProduct } from "@/api/app/product";
import { updateCategory } from "@/api/app/category";
export default {
  dicts: ["goods_type"],
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      name: "",
      // 商品;表格数据
      productList: [],
      tmpList: [],
      selection: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    /** 查询商品;列表 */
    getList() {
      listProduct({
        pageNum: 1,
        pageSize: 5000,
      }).then(({ rows }) => {
        this.productList = rows;
        this.tmpList = [...rows];
        this.selection = this.data?.productId
          ? this.data?.productId?.split(",")?.map((e) => +e)
          : [];
        this.toggleRowSelection();
      });
    },
    // 定位数据
    toggleRowSelection() {
      const rows = this.productList.filter((e) =>
        this.selection?.includes(e.productId)
      );
      this.$nextTick(() => {
        rows.forEach((row) => {
          this.$refs?.multipleTable?.toggleRowSelection(row);
        });
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.productList = this.productList?.filter((e) =>
        e.name?.includes(this.name)
      );
      this.toggleRowSelection();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.name = "";
      this.productList = [...this.tmpList];
      this.toggleRowSelection();
    },
    // 手动单选
    handleSelectionChange(_, { productId }) {
      const index = this.selection?.findIndex((e) => e === productId);
      if (index > -1) {
        this.selection.splice(index, 1);
      } else {
        this.selection.push(productId);
      }
    },
    // 手动全选
    handleSelectionAllChange(selection) {
      this.selection = selection?.map(({ productId }) => productId);
    },
    /** 提交按钮 */
    submitForm() {
      updateCategory({
        ...this.data,
        productId: this.selection?.join(),
      }).then((response) => {
        this.$modal.msgSuccess("保存成功");
        this.shows = false;
        this.$emit("update");
      });
    },
  },
};
</script>
